<template>
  <div class="selectEventBox">
      <div class="selectEvent" :class="{on:isOn}" @click.stop="selectClick">
          <div>{{selectEventDefault}}</div>
          <img src="../assets/icon.png">
      </div>
      <ul class="selectEventList" :class="{on:isOn}" v-show="isOn">
          <li v-for="(item,index) in selectEventsComputed" :key="index" v-text="item.msg" @click.stop="selectListClick(index,item)" v-on:click="$emit('selectListClick')"></li>
      </ul>
  </div>
</template>

<script>
import {getJsonFn} from '../assets/js/unit.js'

export default {
  name: 'selectEvent',
  props:['ajaxUrl'],
  data () {
    return {
      selectEventDefault:'全部事件详情',
      selectedKey:0,
      selectEvents:[],
      isOn:false
    }
  },
  beforeMount() {
    this.getSlectData(this.ajaxUrl);
  },
  computed:{
    selectEventsComputed(){
      this.selectEvents.unshift({
        msg:'全部事件详情',
        key:0
      })
      return this.selectEvents
    }
  },
  methods: {
    selectClick(){
      this.isOn = !this.isOn
    },
    selectListClick(index,item){
      this.selectEventDefault = item.msg;
      this.selectedKey = item.key;
      this.isOn = !this.isOn
    },
    getSlectData(url){
      var _this = this;
      this.$http.get(url).then(function(data){        
        _this.selectEvents = [...data.data.data];   
      });
    },
    alertFn(){
      alert(111)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .selectEventBox {
        height: 23px;
        width: 180px;        
        color: #D9E1EC;
        position: relative;
        box-sizing: border-box;
        font-size: 12px; 
    }

    .selectEventBox .selectEvent {
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;               
        box-sizing: content-box;
        padding-left: 18px;
        padding-right: 7px;
        border: 1px solid #fff;
        border-radius: 5px;
    }

    .selectEventBox .selectEventList {
        /* display:none; */
        position: absolute;
        background: #75A4E3;
        width: 100%;
        border: 1px solid #fff;
        border-radius: 5px;
        border-top: none;
        box-sizing: border-box;
    }

    .selectEventBox .selectEventList li {
      height: 23px;
      display: flex;
      align-items: center;
      padding-left: 18px;
      padding-right: 7px;
      border-top: 1px solid #fff;
    }

    .selectEventBox .selectEventList li:hover {
      background: #fff;
      color: #75A4E3;
    }

    /* on */
    .selectEventBox .selectEvent.on {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      border-bottom: none;
    }

    .selectEventBox .selectEventList.on {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      border-top: none;
    }
</style>
